<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .danmu {
            width: 500px;
            height: 500px;
            margin: 40px auto;
            background-color: #f00;
            position: relative;
            overflow: hidden;
        }

        .danmu img {
            width: 500px;
            height: 450px;
            vertical-align: top;
        }

        .danmu>p {
            display: flex;
            height: 50px;
        }

        .danmu p input {
            flex: 1;
        }

        .danmu p button {
            width: 60px;
        }

        .danmu ul {
            position: absolute;
            left: 0;
            top: 0;
        }

        .item {
            white-space: nowrap;
            left: 500px;
            position: absolute;
        }
    </style>
</head>

<body>

    <div class="danmu">
        <img src="../../../day16/课堂代码/images/girlbig1.jpg" alt="">
        <p>
            <input type="text" class="word">
            <button class="send">发送</button>
        </p>
        <ul>
            <!-- <li class="item">弹幕内容</li> -->
        </ul>
    </div>

    <script>

        var oSend = document.querySelector('.send');
        var oContent = document.querySelector('.word');
        var oUl = document.querySelector('ul');
        var oBox = document.querySelector('.danmu');
        var _width = oBox.offsetWidth;

        // 发送
        oSend.addEventListener('click', function () {
            // 获取内容
            var word = oContent.value;
            if (word) {

                // 创建节点：  可以动态添加css,也可以进行其他的DOM操作

                var oLi = document.createElement('li');
                oLi.innerHTML = word;
                oLi.className = 'item';
                oLi.style.color = color();
                oLi.style.top = rand(0, 300) + 'px';
                oUl.appendChild(oLi);
                move(oLi, 1, -oLi.offsetWidth, 'left', function () {
                    oLi.remove()
                })
            }
        })




        function move(ele, speed, end, prop, cb) {
            // 获取开始的位置
            var cur = parseInt(getComputedStyle(ele)[prop]);
            // 确定速度
            speed = end > cur ? speed : -speed;
            var t = setInterval(function () {
                cur += speed;
                ele.style[prop] = cur + 'px';
                if (Math.abs(end - cur) <= Math.abs(speed)) {
                    clearInterval(t);
                    ele.style[prop] = end + 'px';
                    cb && cb()
                }
            }, 10)
        }



        function color() {
            var r = rand(0, 256);
            var g = rand(0, 256);
            var b = rand(0, 256);
            return `rgb(${r},${g},${b})`
        }

        function rand(min, max) {
            return parseInt(Math.random() * (max - min) + min)
        }


    </script>

</body>

</html>